import React, { Component } from "react";
import {
  Select,
  Input,
  Table,
  DatePicker,
  Button,
  Tabs,
  Pagination
} from "antd";
import moment, { isMoment } from "moment";
import "moment/locale/zh-cn";
import "./index.less";
const { Option } = Select;
const { RangePicker } = DatePicker;
moment.locale("zh-cn");

function handleChange(value) {
  console.log(`selected ${value}`);
}

function onChange(dates, dateStrings) {
  console.log("From: ", dates[0], ", to: ", dates[1]);
  console.log("From: ", dateStrings[0], ", to: ", dateStrings[1]);
}
function callback(key) {
  console.log(key);
}
const dataSource = [
  {
    key: "1",
    name: "胡彦斌",
    age: 32,
    address: "西湖区湖底公园1号"
  },
  {
    key: "2",
    name: "胡彦祖",
    age: 42,
    address: "西湖区湖底公园1号"
  }
];

const columns = [
  {
    title: "姓名",
    dataIndex: "name",
    key: "name"
  },
  {
    title: "年龄",
    dataIndex: "age",
    key: "age"
  },
  {
    title: "住址",
    dataIndex: "address",
    key: "address"
  }
];
export default class OrderQuery extends Component {
  render() {
    return (
      <div className="order-queryq">
        {/* 信息筛选 */}
        <div className="query-search">
          {/* 订单搜索 */}
          <div className="content">
            <span className="title">订单号：</span>
            <Input className="search-input" />
            <span className="title space-left">流水号：</span>

            <Input className="search-input" />
          </div>
          {/* 下单时间 */}
          <div className="order-time">
            <span className="title">下单时间：</span>
            <RangePicker
              ranges={{
                昨天: [moment(), moment()],
                今天: [moment().startOf("date"), moment()],
                近7天: [moment().startOf("week"), moment().endOf("week")],
                近30天: [moment().startOf("month"), moment().endOf("month")]
              }}
              //   defaultPickerValue=[moment()]
              showTime
              format="YYYY/MM/DD HH:mm:ss"
              onChange={onChange}
            />
          </div>
          {/* 商品名称： */}
          <div className="goods">
            <div>
              <span className="title">商品名称：</span>
              <Input className="goods-input" placeholder="请输入商品名称" />
            </div>
            <div className="goods-content">
              <span className="title">订单类型：</span>
              <Select
                defaultValue="lucy"
                style={{ width: 170 }}
                onChange={handleChange}
              >
                <Option value="jack">Jack</Option>
                <Option value="lucy">全部</Option>
                <Option value="disabled" disabled>
                  Disabled
                </Option>
                <Option value="Yiminghe">yiminghe</Option>
              </Select>
            </div>
            <div className="goods-content">
              <span className="title">维权状态：</span>
              <Select
                defaultValue="lucy"
                style={{ width: 170 }}
                onChange={handleChange}
              >
                <Option value="jack">Jack</Option>
                <Option value="lucy">全部</Option>
                <Option value="disabled" disabled>
                  Disabled
                </Option>
                <Option value="Yiminghe">yiminghe</Option>
              </Select>
            </div>
          </div>

          {/* 清空筛选条件 */}
          <div className="filter">
            <Button type="primary" className="select">
              筛选
            </Button>
            <Button className="export-report">导出报表</Button>
            清空筛选条件
          </div>
        </div>
        {/* 列表*/}
        <Table
          style={{ marginTop: 15 }}
          dataSource={dataSource}
          columns={columns}
        />
        {/* 列表分页 */}
        <div style={{ margin: 20 }}>
          <Pagination defaultCurrent={6} total={500} />
        </div>
      </div>
    );
  }
}
